<template>
	<div>
		<Row>
			<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
			<Input class="w-100" v-model="searchKey.name" placeholder="请输入店名" />
			</Col>
		</Row>
		<Row>
			<div class="w-100 d-flex justify-content-between align-items-center ">
				<Button class="m-1" type="error" shape="circle" @click="newMd" icon="md-add">新增</Button>
				<Button class="m-1" type="primary" shape="circle" @click="searchs" icon="ios-search">查询</Button>
			</div>
		</Row>
		<div class="mt-1">
			<Table border :class="'m-1'" :columns="tableInfo.columnInfo" :data="tableInfo.data">
				
				<template slot-scope="{ row, index }" slot="fengmian">
					<div>
						<img style="width: 40px; height: 40px;" :src="row.cover" />
					</div>
				</template>
				
				<!-- 门店状态 -->
				<template slot-scope="{ row, index }" slot="status">
					<i-switch >
					        <span slot="open">开</span>
					        <span slot="close">关</span>
					</i-switch >
					<!-- <span class="text-primary" v-if="row.actflg">开</span>
					<span class="text-danger" v-else>关</span> -->
				</template>
				<template slot-scope="{ row, index }" slot="action">
					<Button type="primary" size="small" class="mr-2" @click="show(row.storeid)">详细</Button>
					<Button type="error" size="small" @click="remove(row.storeid)">删除</Button>
				</template>
			</Table>
		</div>
		<div>
			<Page class="text-right mt-3" :page-size="tableInfo.pageSize" @on-change="pageSearch"
				:total="tableInfo.total" />
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				searchKey: {
					"name": "",
					"sdz": "",
					"jd": "",
					"wd": "",
					"cover": "",
					"sheng": "",
					"shi": "",
					"qu": "",
				},
				tableInfo: {
					currentPage: 1,
					pageSize: 10,
					total: 0,
					columnInfo: [
						{
							title: "封面",
							//key:"cover",
							slot:"fengmian",
							width: 136
						},
						{
							title: "门店编号",
							key: "storeid",
						},
						{
							title: "门店名称",
							key: "name",
						},
						{
							title: "门店地址",
							key: "mddz",
						},
						{
							title: "负责人",
							key: "fzr",
						},
						{
							title: "联系电话",
							key: "lxdh",
						},
						{
							title: "门店状态",
							slot: "status",
						},
						{
							title: "操作",
							slot: 'action',
							width: 150
						}
					],
					data: []
				}
			}
		},
		props: {
			params: {
				type: Object,
				default: undefined,
			}
		},
		methods: {
			init: function() {
				this.tableInfo.currentPage = 0;
				this.search();
			},
			newMd: function() {
				this.$router.push({
					path: "/md/new"
				})
			},
			show: function(storeId) {
				this.$router.push({
					path: "/md/detail?storeId=" + storeId
				})
			},
			remove: function(storeId) {
				this.message.confirm({
					title: "删除提示",
					content: "即将删除场馆，确定吗？",
					onOk: () => {
						this.http.delete({
							url: "/md/info",
							param: {
								storeid
							}
						}).then(data => {
							this.search();
						});
					},
					onCancel: () => {
						this.message.info('操作已取消');
					}
				});
			},
			searchs: function() {
				this.tableInfo.currentPage = 1;
				this.search();
			},
			search: function() {
				this.http.get({
					url: "/md/page",
					param: {
						// 传一个当前页
						current: this.tableInfo.currentPage,
						size:this.tableInfo.pageSize,
						
					}
				}).then(data => {
					this.tableInfo.data = data.records;
					this.tableInfo.currentPage = data.current;
					this.tableInfo.total = data.total;
					this.tableInfo.pageSize = data.size;
				});
			},
			pageSearch: function(changedPage) {
				this.tableInfo.currentPage = changedPage;
				this.search();
			}
		},
		created: function() {
			this.init();
		}
	}
</script>

<style>
</style>
